<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option" ref="table"/>

    <dialog-columns-form
      v-model="formData"
      width="900px"
      title="修改原图链接"
      :visible.sync="editTbLinkShowed"
      :columns="editTbLinkColumns"
      @submit="handleSaveTbLink"
    />

  </el-card>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import YesNoEnum from '@/infra/constant/YesNoEnum'
import {complainFollowUpApi} from '@/feature/cmt/infra/api/complainFollowUpApi'
import CURDTable from '@/framework/components/table/CURDTable'
import ComplainFollowUpStatusEnum from "@/feature/cmt/infra/constants/ComplainFollowUpStatusEnum";
import CheckStatusEnum from "@/infra/constant/CheckStatusEnum";
import ComplainTypeEnum from "@/feature/cmt/infra/constants/ComplainTypeEnum";
import {storeApi} from "@/feature/mct/infra/api/storeApi";
import {adminApi} from "@/feature/mgr/infra/api/adminApi";
import DialogColumnsForm from "@/framework/components/form/DialogColumnsForm";
import HandleResultEnum from "@/feature/cmt/infra/constants/HandleResultEnum";
import {newProductRegisterApi} from "@/feature/pdt/infra/api/newProductRegisterApi";
import DateType from "@/framework/constant/DateType";
import DateUtil from "@/framework/infra/util/DateUtil";
import FormRuleValidator from '@/framework/infra/validator/FormRuleValidator'

export default {
  components: {DialogColumnsForm, CURDTable},
  data() {
    return {
      formData: {},
      editTbLinkColumns: [{
        label: '原图链接',
        width: 120,
        span: 24,
        type: ColumnType.TEXTAREA,
        prop: 'tbLink',
        required: true
      }],
      followEndTimeRequired: true,
      required: false,
      editTbLinkShowed: false
      // option: {}
    }
  },
  destroyed() {
    // this.clearTime()
  },
  computed: {
    option() {
      return {
        requestApi: complainFollowUpApi,
        interceptor: {
          beforeCopy: (formData) => {
            formData.complainNo = ''
            formData.pic = ''
            this.required = formData.complainType !== ComplainTypeEnum.FADE.id && formData.complainType !== ComplainTypeEnum.TM.id
          },
          beforeEdit: (formData) => {
            this.required = formData.complainType !== ComplainTypeEnum.FADE.id && formData.complainType !== ComplainTypeEnum.TM.id
          },
          beforeCreate: () => {
            this.required = false
          }
        },
        // requestApiNames: {
        //   list: 'listMyRegister'
        // },

        showSelection: false,
        columns: [
          {
            label: '店铺',
            prop: 'storeId',
            searchable: true,
            sortable: 'custom',
            type: ColumnType.SELECT,
            required: true,
            options: storeApi.options()
          },
          {
            label: '投诉类型',
            width: 230,
            sortable: 'custom',
            required: true,
            searchable: true,
            type: ColumnType.SELECT,
            onChange: ({value}) => {
              this.required = value !== ComplainTypeEnum.FADE.id && value !== ComplainTypeEnum.TM.id && value !== ComplainTypeEnum.TM_SALE_RULE.id
              this.followEndTimeRequired = value !== ComplainTypeEnum.TM.id
            },
            options: ComplainTypeEnum,
            prop: 'complainType'
          }, {
            label: '违规编号',
            required: this.required,
            rules: [
              { validator: FormRuleValidator.validateMaxNumLen(12, '违规编号/ID必须是12位数字以内'), trigger: 'blur' }
            ],
            sortable: 'custom',
            prop: 'complainNo',
            width: 180,
            searchable: true
          },
          {
            label: '原图链接',
            width: 120,
            hiddenInForm: true,
            viewAsLink: true,
            prop: 'tbLink',
            required: false
          },
          {
            label: '违规时间',
            searchable: true,
            width: 110,
            sortable: 'custom',
            required: true,
            type: ColumnType.DATE,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            prop: 'complainTime'
          },

          {
            label: '状态',
            hiddenInForm: true,
            sortable: 'custom',
            width: 120,
            type: ColumnType.SELECT,
            searchable: true,
            options: ComplainFollowUpStatusEnum,
            prop: 'status'
          },
          // {
          //   label: '严重程度',
          //   required: true,
          //   prop: 'severity'
          // },
          {
            label: '扣分',
            width: 80,
            required: this.required,
            sortable: 'custom',
            prop: 'reducePoints',
            type: ColumnType.NUMBER
          }, {
            label: '跟进截止时间',
            width: 160,
            hiddenInForm: true,
            sortable: 'custom',
            prop: 'followEndTime',
            type: ColumnType.DATETIME
          },
          // {
          //   label: '跟进截止倒计时',
          //   width: 120,
          //   // hiddenInForm: true,
          //   span: 12,
          //   color: '#f56c6c',
          //   required: this.followEndTimeRequired,
          //   prop: 'followEndLeftSeconds',
          //   type: ColumnType.LEFT_TIME_COUNT
          // },
          // {
          //   label: '处罚状态',
          //   required: true,
          //   prop: 'punishStatus'
          // },
          {
            label: '商品ID',
            required: this.required,
            width: 110,
            onChange({formData}) {
              // console.log(v)
              // formData.bloggerName = formData.itemNo
              // console.log(formData)
              if (formData.itemNo) {
                newProductRegisterApi.findFirstByProductNo(formData.itemNo).then(data => {
                  if (!data) {
                    return
                  }
                  formData.bloggerName = data.bloggerName
                  formData.channel = data.channel
                  formData.tbLink = data.tbLink
                })
              }
            },
            sortable: 'custom',
            searchable: true,
            prop: 'itemNo'
          }, {
            label: '博主名称',
            width: 110,
            type: ColumnType.PLAIN_TEXT,
            // sortable: 'custom',
            searchable: true,
            prop: 'bloggerName'
          }, {
            label: '渠道',
            type: ColumnType.PLAIN_TEXT,
            width: 110,
            // sortable: 'custom',
            searchable: true,
            prop: 'channel'
          },
          {
            label: '原图链接',
            width: 120,
            hiddenInForm: false,
            type: ColumnType.PLAIN_TEXT,
            hiddenInTable: true,
            required: false,
            viewAsLink: true,
            prop: 'tbLink'
          },
          {
            label: '登记时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            sortable: 'custom',
            prop: 'registrationTime'
          },
          {
            label: '图片',
            prop: 'pic',
            required: this.required,
            width: 75,
            type: ColumnType.IMAGE
          },
          {
            label: '已完成',
            width: 100,
            required: true,
            searchable: true,
            hiddenInForm: true,
            type: ColumnType.RADIO,
            options: YesNoEnum,
            prop: 'finishFlag'
          },
          {
            label: '最终扣分',
            hiddenInForm: true,
            width: 80,
            required: true,
            type: ColumnType.NUMBER,
            prop: 'finalReducePoints'
          }, {
            label: '累计扣分',
            required: true,
            hiddenInForm: true,
            width: 80,
            type: ColumnType.NUMBER,
            prop: 'accReducePoints'
          }, {
            label: '处理结果',
            required: false,
            width: 100,
            hiddenInForm: true,
            span: 24,
            options: HandleResultEnum,
            type: ColumnType.RADIO,
            prop: 'handleResult'
          }, {
            label: '连接处理结果',
            required: true,
            width: 100,
            hiddenInForm: true,
            type: ColumnType.TEXT,
            prop: 'conHandleResult'
          },
          // {
          //   label: '合作图',
          //   width: 120,
          //   span: 24,
          //   hiddenInForm: true,
          //   type: ColumnType.IMAGE,
          //   prop: 'opPicImg'
          // },
          {
            label: '撤销投诉金额',
            required: true,
            hiddenInForm: true,
            width: 120,
            type: ColumnType.TEXT,
            prop: 'payOuts'
          },
          {
            label: '备注',
            width: 230,
            type: ColumnType.TEXTAREA,
            span: 24,
            prop: 'remark'
          },
          {
            label: '跟进记录',
            width: 100,
            hiddenInForm: true,
            type: ColumnType.TEXTAREA,
            rows: 5,
            span: 24,
            viewDetail: true,
            prop: 'followUpRecords',
            required: true
          },
          {
            label: '审核状态',
            width: 90,
            type: ColumnType.RADIO,
            hiddenInForm: true,
            searchable: true,
            options: CheckStatusEnum,
            prop: 'checkStatus'
          }, {
            label: '审核备注',
            width: 180,
            hiddenInForm: true,
            prop: 'checkResult'
          }, {
            label: '投诉处罚凭证',
            width: 100,
            hiddenInForm: true,
            type: ColumnType.IMAGE,
            prop: 'checkRemarkPic'
          },
          {
            label: '登记人',
            type: ColumnType.SELECT,
            searchable: true,
            width: 100,
            options: adminApi.listAll(),
            hiddenInForm: true,
            prop: 'registrantId'
          },
          {
            label: '跟进人',
            width: 100,
            searchable: true,
            type: ColumnType.SELECT,
            hiddenInForm: true,
            // showFilter: ({isEdit}) => !isEdit,
            options: adminApi.listAll(),
            //   .then(data => {
            //   return data.filter(el => el.adminTypeList.includes(AdminTypeEnum.COMPLAIN_FOLLOWER.id))
            // }),
            prop: 'followUpManId'
          },
          {
            label: '审核人',
            width: 100,
            searchable: true,
            hiddenInForm: true,
            prop: 'checkerId',
            type: ColumnType.SELECT,
            options: adminApi.listAll()
          },
          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtCreate'
          }
          // {
          //   label: '修改时间',
          //   type: ColumnType.DATETIME,
          //   hiddenInForm: true,
          //   prop: 'gmtModified'
          // }
        ]
      }
    }
  },
  methods: {
    handleEditTbLink({arg}) {
      this.formData = {...arg}
      if (!arg.tbLink) {
        complainFollowUpApi.findLatestByItemNo(arg.itemNo, arg.id).then(data => {
          if (!data) {
            return
          }
          this.formData.tbLink = data.tbLink
        })
      }
      // console.log(arg)
      // Object.assign(this.formData, arg)
      this.editTbLinkShowed = true
    },
    handleSaveTbLink({done}) {
      complainFollowUpApi.saveTbLink(this.formData.id, this.formData.tbLink.trim()).then(() => {
        this.editTbLinkShowed = false
        this.$refs.table.reloadTable()
      }).finally(() => {
        done()
      })
    },
    handleCancel({arg}) {
      this.$confirm('确认作废吗', '提示').then(() => {
        complainFollowUpApi.submit(arg.id).then(() => {
          this.$message.success('作废成功')
          arg.status = ComplainFollowUpStatusEnum.cancel.id
        })
      })
    },
    handleSubmitFollow({$service, arg}) {
      this.$confirm('确定提交吗?', '提示').then(() => {
        complainFollowUpApi.submit(arg.id).then(() => {
          this.$message.success('提交成功')
          $service.reloadTable()
        })
      })
    }
  }

}
</script>

